<template>
  <div class="MyHeader wh">
    <div class="MyHeader-content">
      <transition name="el-fade-in-linear">
        <span v-if="routeData && routeData.subtitle">
          <span class="back click" @click="$m.back">
            <i class="el-icon-back"></i>
            返回
          </span>
          <el-divider direction="vertical"></el-divider>
        </span>
      </transition>

      <span class="title" v-if="routeData && routeData.title">{{
        routeData.title
      }}</span>
      <span class="desc" v-if="routeData && routeData.subtitle">
        <i class="el-icon-arrow-right"></i>
        {{ routeData.subtitle }}
      </span>
      <!--      <el-page-header @back="$m.back" :content="currentRoute.meta.title">-->
      <!--      </el-page-header>-->
      <!--      <el-breadcrumb separator-class="el-icon-arrow-right">-->
      <!--        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
      <!--        <el-breadcrumb-item-->
      <!--          v-for="(item, index) in levelList"-->
      <!--          :key="item.path"-->
      <!--          v-if="item.path !== '/home'"-->
      <!--          >{{ item.meta.title }}</el-breadcrumb-item-->
      <!--        >-->
      <!--      </el-breadcrumb>-->
    </div>
    <div class="MyHeader-right">
      <m-dropdown @command="avatarCommand" v-if="userInfo">
        <m-avatar class="avatar click" src="" :name="userInfo.name"> </m-avatar>
        <m-dropdown-menu slot="dropdown">
          <m-dropdown-item v-auth="['userInfo:query']" command="userInfo"
            >个人中心</m-dropdown-item
          >
          <m-dropdown-item command="logout">退出登录</m-dropdown-item>
        </m-dropdown-menu>
      </m-dropdown>

      <m-dropdown @command="avatarCommand" v-else="">
        <el-avatar class="avatar click" :src="avatar"></el-avatar>
        <m-dropdown-menu slot="dropdown">
          <m-dropdown-item command="logout">退出登录</m-dropdown-item>
        </m-dropdown-menu>
      </m-dropdown>
    </div>
    <change-theme v-model="changeTheme.visible"></change-theme>
  </div>
</template>

<script>
import $config from "@/config";
export default {
  name: "MyHeader",
  data() {
    return {
      levelList: null,
      changeTheme: {
        visible: false,
      },
      routeData: null,
      avatar:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      conservationUrl: $config.dataV.url + "/#/middle/middlePlatform",
      conservationDemoUrl:
        $config.dataV.url + "/#/middle/middlePlatform?version=beta",
      // conservationUrl: $config.dataV.url + "/#/middle/conservationBoard",
      // conservationDemoUrl:
      //   $config.dataV.url + "/#/middle/conservationBoard?version=beta",
      // bigDataEnergyUrl: $config.dataV.url + "/#/middle/lightingBoard",
      // bigDataEnergyDemoUrl:
      //   $config.dataV.url + "/#/middle/lightingBoard?version=beta",
    };
  },
  components: {},
  computed: {
    userInfo() {
      return this.$store.state.common.userInfo;
    },
    authArr() {
      return this.$store.state.auth.arr || [];
      // return this.$store.state.MUI.MMenu.data.find(e => e.meta.code === 'dataV')
    },
  },
  watch: {
    $route: {
      handler(route) {
        setTimeout(() => {
          this.routeData = this.$route.meta;
        }, 0);

        // if you go to the redirect page, do not update the breadcrumbs
        if (route.path.startsWith("/redirect/")) {
          return;
        }
        this.getBreadcrumb();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      const first = matched[0];
      if (!this.isDashboard(first)) {
        matched = [].concat(matched);
      }

      this.levelList = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
    },
    isDashboard(route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return name.trim() === "Index";
    },
    avatarCommand(data) {
      if (data === "userInfo") {
        this.$m.to("UserInfo");
      } else if (data === "logout") {
        // 退出登录
        this.$store.dispatch("logout");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";

.MyHeader {
  vertical-align: middle;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .MyHeader-content {
    display: inline-block;
    vertical-align: middle;
    .title {
      font-weight: bold;
    }
    .desc {
      margin: 0 px2(8);
      display: inline-block;
    }
  }
  .MyHeader-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    > * {
      margin: 0 px2(10);
    }
    .avatar {
      width: px2(40);
      height: px2(40);
    }
    .project {
    }
    .board-link {
      font-size: 0;
      margin: 0 px2(10);
      .icon {
        width: px2(16);
      }
      .icon-conservation {
        width: px2(16);
      }
    }
    .board-demo {
      filter: grayscale(100%);
    }
  }
}
.alarm {
  position: relative;
  font-size: px2(20);

  .el-icon-bell {
    font-size: px2(20);
  }
}
.mesges {
  text-align: center !important;
}
</style>
